import {extend} from '../common/Tool'
/**
 *
 * 组件结构：
 * div.kt-popup.kt-popup-top
 *  div.kt-popup-arrow
 *  div.kt-popup-content
 *    ul.kt-list.kt-list-noborder
 *      li.kt-list-item.kt-list-item-middle
 *        div.kt-list-item-inner
 *
 * 使用：
 * import createPopup from '../../component/kt-popup'

 const popup = createPopup()

 const buttons = (function (amt) {
  const ret = []
  for (let i = 0; i < amt; ++i) {
    ret.push({title: '按钮' + i, hasChild:true})
  }
  return ret
})(500)

 popup.init({
  buttons,
  hasChild: true,
}, (selectButton) => {
  if (selectButton.hasChild) {
    popup.appdenChild(buttons, (button)=>{
        alert('就这样算了吧')
    })
  }

})

 *
 */
class Popup {
  init(options, callback) {
    extend(this, {
      frameBounces: false, //frame是否弹动
      buttons: [],
      maskDiv: false,
      popupDiv: false,
      popupLeft: '0.1rem',

      hasChild: false,
      popupDiv2: false,

      // min-width: 3.2rem;
      maskDivCls: 'kt-mask',
      maskInCls: 'kt-mask-in',
      
      onClose:null,

    }, options)
    var self = this;
    self._open(options, callback);
  }

  _open(options, callback) {
    var self = this;
    if (self.popupDiv) {
      self._close();
      return;
    }
    if (!self.maskDiv) {
      self.maskDiv = document.createElement("div");
      self.maskDiv.className = self.maskDivCls
      document.body.appendChild(self.maskDiv);
    }

    self.popupDiv = document.createElement("div");
    self.popupDiv.className = "kt-popup"
    self.popupDiv.innerHTML = '<div class="kt-popup-content"></div>';
    self.popupDiv.style.left = self.popupLeft

    document.body.appendChild(self.popupDiv);


    let buttonsHtml = ''
    if (self.buttons && self.buttons.length) {
      buttonsHtml += '<div class="kt-list">';
      for (var i = 0; i < self.buttons.length; i++) {
        buttonsHtml += `<div class="kt-list-item${self._childCls()}">${self.buttons[i].title}</div>`
      }
      buttonsHtml += '</div>';
    }

    document.querySelector(".kt-popup .kt-popup-content").insertAdjacentHTML('beforeend', buttonsHtml);

    self.maskDiv.classList.add("kt-mask-in");
    self.popupDiv.classList.add("kt-popup-in");
    self.popupDiv.addEventListener("touchmove", function (event) {
      // event.preventDefault();
    })
    self.maskDiv.addEventListener("touchmove", function (event) {
      event.preventDefault();
   
    })
    if (typeof(api) != 'undefined' && typeof(api) == 'object' && self.frameBounces) {
      api.setFrameAttr({
        bounces: false
      });
    }
    const ktPopup = document.querySelector(".kt-popup")
    var popupButtons = document.querySelectorAll(".kt-popup .kt-list-item");
    if (popupButtons && popupButtons.length > 0) {
      setTimeout(function () {
        self.maskDiv.onclick = function () {
          self._close();
          return;
        };
        for (var ii = 0; ii < popupButtons.length; ii++) {
          (function (e) {
            const btn = self.buttons[e]
            popupButtons[e].onclick = function () {
              for (var m = 0; m < popupButtons.length; m++) {
                popupButtons[m].classList.remove("kt-check-border");
              }
              popupButtons[e].classList.add("kt-check-border");
              if (callback) {
                callback(btn);
                if(btn.hasChild==='false'){
                   self._close();
                }
              }
              if (btn.hasChild) {

              }
              else {
                self._close();
              }
            }
          })(ii)
        }
      }, 350)
    }
  }

  appdenChild(buttons, callback) {
    const self = this
    if (self.popupDiv2) {
      self.popupDiv2.classList.add("kt-popup-out");
      self.popupDiv2.parentNode.removeChild(self.popupDiv2);
      self.popupDiv2 = false;
    }
    setTimeout(function () {
      let buttonsHtml = ''
      if (buttons.length) {
        for (var i = 0; i < buttons.length; i++) {
          buttonsHtml += `<div class="kt-list-item kt-selected">${buttons[i].title}</div>`
        }
      }
      self.popupDiv2 = document.createElement("div");
      self.popupDiv2.className = "kt-popup"
      self.popupDiv2.innerHTML = `<div class="kt-popup-content"><div class="kt-list">${buttonsHtml}</div></div>`;
      self.popupDiv2.style.left = '3.3rem'
      document.body.appendChild(self.popupDiv2);
      self.popupDiv2.classList.add("kt-popup-in");

      const popupButtons = self.popupDiv2.querySelectorAll(".kt-list-item");

      if (popupButtons && popupButtons.length > 0) {
        for (let ii = 0; ii < popupButtons.length; ii++) {
          const btn = self.buttons[ii]
          popupButtons[ii].onclick = function () {
            if (callback) {
              callback(buttons[ii])
            }
            self._close()
          }
        }
      }
    }, 300)


    /*buttons = buttons || []

     const ktList = self.popupDiv2.querySelectorAll('.kt-list')
     ktList.innerHTML =  buttonsHtml
     const popupButtons = self.popupDiv2.querySelectorAll(".kt-list-item");
     if (popupButtons && popupButtons.length > 0) {
     for (let ii = 0; ii < popupButtons.length; ii++) {
     const btn = self.buttons[ii]
     popupButtons[ii].onclick = function () {
     alert('it is me')
     }
     }
     }*/
  }

  _childCls() {
    return this.hasChild ? ' has-child' : ''
  }

  _close() {
    var self = this;
    if (typeof(api) != 'undefined' && typeof(api) == 'object' && self.frameBounces) {
      api.setFrameAttr({
        bounces: true
      });
    }
    if (self.popupDiv2) {
      self.popupDiv2.classList.add("kt-popup-out");
      setTimeout(function () {
        self.popupDiv2.parentNode.removeChild(self.popupDiv2);
        self.popupDiv2 = false;
      }, 300)
    }
    if (self.popupDiv) {
      self.popupDiv.classList.add("kt-popup-out");
      self.maskDiv.style.opacity = 0;
      setTimeout(function () {
        self.popupDiv.parentNode.removeChild(self.popupDiv);
        self.maskDiv.parentNode.removeChild(self.maskDiv);
        self.maskDiv = self.popupDiv = false;
      }, 300)
    }
    if (self.onClose) {
    	self.onClose()
    }
  }
}


export
default

function () {
  return new Popup()
}